import React from "react";
import { Modal, Button } from "antd";
import { connect } from "dva";

import { messagegetmessagebyid } from "../../../services/api";

@connect(state => ({
  fetchingNotices: state.global.fetchingNotices
}))
class MessageDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      checkList: {
        addresser: "", //查看消息弹窗的发送人
        sendTime: "", //查看消息弹窗的时间
        title: "", //查看消息弹窗的标题
        content: [], //内容
        id: "" //人员消息关联主键
      }
    };
  }

  componentWillReceiveProps(nextProps) {
    if (
      nextProps.record.id &&
      nextProps.record.id !== this.state.checkList.id
    ) {
      this.clickHandlerView(nextProps.record);
    }

    if (nextProps.visible) {
      this.setState({ visible: nextProps.visible });
    }
  }

  checkMessageCancel = () => {
    this.setState({
      visible: false,
      checkList: {
        addresser: "", //查看消息弹窗的发送人
        sendTime: "", //查看消息弹窗的时间
        title: "", //查看消息弹窗的标题
        content: [], //内容
        id: "" //人员消息关联主键
      }
    });

    this.props.closeModal();
  };

  // 点击查看展示信息弹窗
  clickHandlerView = record => {
    //消息详情，接收方（new）
    messagegetmessagebyid({
      id: record.id,
      messageType: record.messageType
    }).then(data => {
      console.log(data.data, "消息详情，接收方（new）");
      if (data.data) {
        this.setState({
          checkList: data.data.messageDetail
        });

        this.props.dispatch({
          type: "global/fetchNotices"
        });
      }
    });
  };

  render() {
    return (
      <Modal
        key="asdfasfas"
        width={700}
        title={
          <div className="message-title clearfix">
            <span>
              来自：<i>{this.state.checkList.addresser}</i>
            </span>
            <span className="title-right">{this.state.checkList.sendTime}</span>
            <p>{this.state.checkList.title}</p>
          </div>
        }
        visible={this.state.visible}
        onCancel={this.checkMessageCancel}
        footer={[<Button onClick={this.checkMessageCancel}>关闭</Button>]}
      >
        <div className="message-content">
          <div
            className="content-theme"
            dangerouslySetInnerHTML={{ __html: this.state.checkList.content }}
          />
        </div>
      </Modal>
    );
  }
}

export default MessageDetail;
